<template>
  <div class="entirety">
    <HpHeader />
    <div class="rheader">
      <h3><span>我听过的歌</span></h3>
      <h4>累计听歌 {{ collects.length }} 首</h4>
      <span class="songsall">所有时间</span>
      <i></i>
      <span class="songsweek">最近一周</span>
    </div>
    <div class="bottom">
      <ul>
        <li v-for="(item, index) in collects"
          :key="item.id"
          :class="index % 2 === 0 ? 'bg' : ''"
          @click="toSong(item.songId, item.song.songName)">
          <div class="barrel">
            <div class="no">{{++index}}.</div>
            <img src="./images/icon.png">
            <div class="song-name">{{item.song.songName}}</div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="collects.length > 8" class="lookMore" @click="lookMore"><span>查看更多></span></div>
    
    <!-- <div class="mySongList">
      <h3>
        <span>我创建的歌单</span>
      </h3>
    </div> -->
    <!-- <div class="my-create"><MusicList :recommendData='recommendData' :rowNum='5' /></div> -->
    <div class="collectSongList">
      <h3>
        <span>我收藏的歌单 ( {{ recommendSheet.length }} ) </span>
      </h3>
    </div>
    <div class="my-collection"><MusicList :recommendData='recommendSheet' :rowNum='5' /></div>
  </div>
  
</template>

<script>
import MusicList from '@/components/MusicList'
import HpHeader from '@/components/HomepageHeader'
import { req, API_COLLECT_FINDBYID } from '@/api/api'
import { reqRecommendSheet } from '@/api/index'
export default {
  name: 'HomePage',
  components:{ MusicList, HpHeader },
  data () {
    return {
      collects: [],
      recommendSheet: []
    }
  },
  methods: {
    init() {
      req.list(API_COLLECT_FINDBYID, { value: this.userInfo.id }).then(res => {
        if(res.rows.length > 8) {
          for(let i=0; i<8; i++) {
            this.collects.push(res.rows[i])
          }
        } else {
          this.collects = res.rows
        }
      })
      reqRecommendSheet().then(res => {
        res.rows.forEach((item, index) => {
          if(index < 8) {
              let obj = {
              id: item.id,
              songListId: item.songList.id,
              name: item.songList.name,
              // imgUrl: `../../images/songSheet0${ index + 1 }.jpg`,
              imgIdx: index + 1,
              isBoutique: index % 3 === 0 ? true : false,
              synopsis: ( index + 8 ) * 8888,
              isRadioProgram: false
            }
            this.recommendSheet.push(obj)
          }
        })
      })
    },
    toSong(id, songName) {
      this.$router.push({
        path: `/song/${id}/${songName}`
      })
    },
    lookMore(){
      this.$router.push({path:'/lookmore'})
    }
  },
  created() {
    this.init()
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    }
  }
}
</script>

<style lang="less" scoped>
.bg {
  background-color: #f7f7f7;
}
.entirety {
  background-color: rgb(255, 255, 255);
  width: 980px;
  // background: pink;
  margin: 0 auto;
  .collectSongList {
    h3 {
      font-size: 20px;
      line-height: 28px;
      float: left;
      font-weight: normal;
    }
  }
  .rheader {
    width: 900px;
    height: 35px;
    background: rgb(255, 255, 255);
    margin: 0 auto;
    h3 {
      font-size: 20px;
      line-height: 28px;
      float: left;
      font-weight: normal;
    }
    h4 {
      float: left;
      display: inline;
      margin-top: 5px;
      margin-left: 10px;
      line-height: 26px;
      font-weight: 400px;
      color: #666;
    }
    .songsall {
      line-height: 26px;
      color: #666;
      cursor: pointer;
      float: right;
      margin-left: 8px;
    }
    i {
      width: 1px;
      height: 12px;
      margin-top: 7px;
      background: #999;
      font-style: normal;
      font-size: inherit;
    }
    .songsweek {
      line-height: 26px;
      color: #333;
      font-weight: 700;
      float: right;
      margin-left: 8px;
    }
  }
  .bottom {
    width: 900px;
    margin: 0 auto;
    border: 1px solid #c6c5c5;
    border-top: 2px solid rgb(194,12,12);
    ul {
      display: block;
      li {
        display: list-item;
        width: 898px;
        height: 38px;
        line-height: 38px;
        .barrel {
          display: flex;
          .no {
            padding: 0 10px 0 20px;
          }
          img {
            margin-top: 10px;
            width: 17px;
            height: 17px;
          }
          .song-name {
            flex: 1;
            padding-left: 10px;
            font-weight: bold;
          }
          &:hover {
            background-color: #f2f2f2;
            cursor: pointer;
          }
        }
      }
    }
  }
  .lookMore {
    position: relative;
    span {
      color: #aeaeae;
      display: block;
      position: absolute;
      // line-height: 32px;
      top: 10px;
      right: 40px;
      cursor: pointer;
    }
  }
  .mySongList {
    width: 900px;
    height: 35px;
    margin: 0 auto;
    border-bottom: 2px solid #c20c0c;
    padding-top: 60px;
    h3 {
      font-size: 20px;
      line-height: 28px;
      font-weight: normal;
      span {
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        position: relative;
        zoom: 1;
      }
    }
  }
  .my-create {
    margin: 0 40px;
    box-sizing: border-box;
  }
  // .mySong {
  //   width: 140px;
  //   height: 140px;
  //   margin: 20px 0 0 40px;
  //   position: relative;
  //   img {
  //     width: 100%;
  //     height: 100%;
  //     display: block;
  //   }
    // .songBottom {
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 27px;
    //   background-position: 0 -537px;
    //   color: #ccc;
    //   text-align: center;
    //   line-height: 27px;
    //   background-color: rgb(0, 0, 0, 0.5);
    // }
  // }
  .collectSongList {
    width: 900px;
    height: 35px;
    margin: 0 auto;
    border-bottom: 2px solid #c20c0c;
    padding-top: 60px;
    h3 {
      // font-size: 20px;
      line-height: 28px;
      font-weight: normal;
      span {
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        position: relative;
        zoom: 1;
      }
    }
  }
  .my-collection {
    margin: 0 40px;
    box-sizing: border-box;
  }
}

</style>